<template>
  <div class="contentWrap">
    <h2>{{ centence.min_content }}</h2>
    <p>《{{ centence.title }}》</p>
    <p>{{ centence.author }}</p>

    <button @click="change">换一句</button>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  data() {
    return {
      centence: {
        min_content: "恼乱横波秋一寸。斜阳只与黄昏近。",
        title: "蝶恋花·卷絮风头寒欲尽",
        author: "赵令畤",
      },
    };
  },
  mounted() {
    this.getContent();
  },
  methods: {
    getContent() {
      $.ajax({
        url: "https://api.muxiaoguo.cn/api/Gushici",
        data: {
          api_key: "651a389ba5c2a66c",
        },
        dataType: "json",
        type: "get",
      }).then((res) => {
        console.log(34, res);
        this.centence = res.data;
      });
    },
    change() {
      // 发送请求
      this.getContent();
    },
  },
};
</script>

<style lang="scss">
.contentWrap {
  text-align: center;
}
</style>